বুটস্ট্রাপ ৫ তে কোল্যাপসিবল কনটেন্ট এবং ইভেন্টস এর মাধ্যমে আপনি আপনার ওয়েবসাইটে ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি ফিচার তৈরি করতে পারেন। কোল্যাপসিবল কনটেন্ট ব্যবহার করলে ব্যবহারকারীরা কন্টেন্টগুলো একে একে দেখতে পারে, যা পেজের স্পেস সংরক্ষণে সাহায্য করে এবং ইন্টারফেসটি আরও পরিষ্কার রাখে। এছাড়া, ইভেন্টসের মাধ্যমে আপনি কোল্যাপসিবল কনটেন্টের কার্যক্রমকে আরও কাস্টমাইজ করতে পারেন, যেমন যখন কোনো বাটনে ক্লিক করা হয়, তখন কনটেন্ট কোল্যাপস বা এক্সপ্যান্ড হবে।
বুটস্ট্রাপ ৫ এর কোল্যাপসিবল কনটেন্ট ব্যবহারের জন্য collapse ক্লাস ব্যবহার করা হয়। এই ক্লাসটি কনটেন্টের প্রদর্শন বা লুকানো (toggle) কার্যকলাপকে নিয়ন্ত্রণ করে। সাধারণত এটি বাটন বা লিঙ্ক দিয়ে কন্ট্রোল করা হয়।
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
কোল্যাপসিবল কনটেন্ট দেখুন
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
এটি একটি কোল্যাপসিবল কনটেন্ট ব্লক। আপনি এটি নিচে বা উপরে খোলার জন্য ক্লিক করতে পারেন।
</div>
</div>
এখানে:
data-bs-toggle="collapse": এই অ্যাট্রিবিউটটি কোল্যাপসিবল কনটেন্ট চালু বা বন্ধ করার জন্য ব্যবহার করা হয়।data-bs-target="#collapseExample": এটি সেই আইডি নির্দেশ করে, যা কোল্যাপসিবল কনটেন্টের জন্য টার্গেট।aria-expanded="false": এটি অ্যাক্সেসিবিলিটির জন্য নির্দেশ করে যে কনটেন্টটি প্রাথমিকভাবে বন্ধ থাকবে।বুটস্ট্রাপের কোল্যাপসিবল কনটেন্টের সাথে আপনি বিভিন্ন ইভেন্টসও ট্রিগার করতে পারেন। এই ইভেন্টস গুলো ব্যবহারকারীর ইন্টারঅ্যাকশন বা কনটেন্টের পরিবর্তনের উপর ভিত্তি করে কিছু ফাংশন কার্যকর করতে সাহায্য করে।
show.bs.collapse: কোল্যাপসিবল কনটেন্ট এক্সপ্যান্ড করার আগে এই ইভেন্টটি ট্রিগার হয়।shown.bs.collapse: কোল্যাপসিবল কনটেন্ট এক্সপ্যান্ড হওয়ার পর এই ইভেন্টটি ট্রিগার হয়।hide.bs.collapse: কোল্যাপসিবল কনটেন্ট বন্ধ করার আগে এই ইভেন্টটি ট্রিগার হয়।hidden.bs.collapse: কোল্যাপসিবল কনটেন্ট বন্ধ হওয়ার পর এই ইভেন্টটি ট্রিগার হয়।<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
কোল্যাপসিবল কনটেন্ট দেখুন
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
এটি একটি কোল্যাপসিবল কনটেন্ট ব্লক। আপনি এটি নিচে বা উপরে খোলার জন্য ক্লিক করতে পারেন।
</div>
</div>
<script>
var collapseElement = document.getElementById('collapseExample');
collapseElement.addEventListener('show.bs.collapse', function () {
console.log('কোল্যাপসিবল কনটেন্ট এক্সপ্যান্ড হচ্ছে');
});
collapseElement.addEventListener('shown.bs.collapse', function () {
console.log('কোল্যাপসিবল কনটেন্ট এক্সপ্যান্ড হয়েছে');
});
collapseElement.addEventListener('hide.bs.collapse', function () {
console.log('কোল্যাপসিবল কনটেন্ট বন্ধ হচ্ছে');
});
collapseElement.addEventListener('hidden.bs.collapse', function () {
console.log('কোল্যাপসিবল কনটেন্ট বন্ধ হয়েছে');
});
</script>
এখানে:
show.bs.collapse: কনটেন্ট এক্সপ্যান্ড হওয়ার আগে এটি ট্রিগার হয়।shown.bs.collapse: কনটেন্ট এক্সপ্যান্ড হওয়ার পর এটি ট্রিগার হয়।hide.bs.collapse: কনটেন্ট বন্ধ হওয়ার আগে এটি ট্রিগার হয়।hidden.bs.collapse: কনটেন্ট বন্ধ হওয়ার পর এটি ট্রিগার হয়।আপনি কোল্যাপসিবল কনটেন্টের জন্য আরও কাস্টম ইফেক্ট বা কাস্টম কোড ব্যবহার করতে পারেন, যেমন কনটেন্ট এক্সপ্যান্ড করার সময় কোনো ক্লাস যোগ করা বা অন্য কোনো ফাংশন কল করা।
<button class="btn btn-primary" id="collapseBtn">
কোল্যাপসিবল কনটেন্ট দেখুন
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
এটি একটি কোল্যাপসিবল কনটেন্ট ব্লক।
</div>
</div>
<script>
var myCollapse = document.getElementById('collapseExample');
var collapseBtn = document.getElementById('collapseBtn');
collapseBtn.addEventListener('click', function () {
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: true
});
});
</script>
এখানে, new bootstrap.Collapse() ব্যবহার করে কাস্টম ফাংশন তৈরি করা হয়েছে, যা আপনার ইচ্ছামতো কোল্যাপসিবল কনটেন্টকে নিয়ন্ত্রণ করতে সহায়তা করবে।
বুটস্ট্রাপ ৫ এর কোল্যাপসিবল কনটেন্ট এবং ইভেন্টস ব্যবহার করে আপনি সহজেই ইন্টারেক্টিভ ওয়েব ডিজাইন তৈরি করতে পারেন। collapse ক্লাসটি কনটেন্ট লুকানো বা প্রদর্শন করার জন্য ব্যবহৃত হয়, এবং ইভেন্টস ব্যবহার করে আপনি কনটেন্টের পরিবর্তনের উপর নির্ভর করে অ্যাকশন নিতে পারেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
